<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="UTF-8" />
    <title>悬浮菜单</title>
<style type="text/css">
#menu,#menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#menu:after {
    content:"";
    display: block;
    clear: both;
}
#menu>li {
    position: relative;
    width: 300px;
    height: 50px;
    float: left;
    background-color: rgb(54, 231, 201);
    transition: background-color 300ms;
}
#menu>li:hover {
    background-color: rgb(47, 211, 202);
}
#menu>li>ul {
    position: absolute;
    min-width: 100%;
    top: 100%;
    background-color: rgb(58, 225, 225);
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    transition: all 600ms;
}
#menu>li:hover>ul {
    max-height: 120px;
    opacity: 1;
}
#menu>li li:hover {
    background-color: rgb(79, 135, 226);
}
</style>
</head>
<body>
    <blockquote> 
    <center>
<ul id="menu">
    <li>你想去的地方
        <ul> 
            <li>四川</li>
            <li>新疆</li>
            <li>云南</li>
            <li>大理</li>
        </ul>
      </li>
    <li>你想吃的东西
        <ul>
            <li>牛</li>
            <li>鸡</li>
            <li>🐏</li>
        </ul>
      </li>
    <li>你喜欢的颜色
        <ul> 
            <li>green</li>
            <li>red</li>
            <li>gray</li>
            <li>black</li>
        </ul>
      </li>
    <li>你喜欢的运动
        <ul> 
            <li>唱</li>
            <li>跳</li>
            <li>rap</li>
            <li>篮球</li>
        </ul>
      </li>
</ul></center></blockquote>
</body>
</html>